import React from 'react';
import AppLayout from '../layout/AppLayout';
import { getChipsWithPrimary } from '../utils/chipConfig';
import './form.css';
import './scaffold.css';

export default function SimulationConfigSaveV2() {
  const chips = getChipsWithPrimary('配置', '/simulation-config-save-v2');

  return (
    <AppLayout active="文件" chips={chips}>
      <div style={{ marginBottom: 24 }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>☰</span>
            <span>通用</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>📄</span>
            <span>记录</span>
          </button>
          <button className="config-subtab active">
            <span style={{ fontSize: 20 }}>💾</span>
            <span>保存配置</span>
          </button>
          <button className="config-subtab">
            <span style={{ fontSize: 20 }}>🕸️</span>
            <span>网络属性</span>
          </button>
        </div>
      </div>

      <div className="form-2col">
        <div className="card">
          <div className="field">
            <label>模拟标签</label>
            <div className="input" />
          </div>
          <div className="field">
            <label>输出文件夹</label>
            <div className="input" />
          </div>
          <div className="field">
            <label>输出文件名</label>
            <div className="input" />
          </div>
          <div className="field">
            <label>包含数据</label>
            <div className="input">netParams · netCells · netPops · simConfig · simData</div>
          </div>
        </div>

        <div className="card">
          <div className="switch-list">
            <div className="switch-item"><span className="switch on" /> 另存为JSON 格式</div>
            <div className="switch-item"><span className="switch on" /> 另存为 Pickle 格式</div>
            <div className="switch-item"><span className="switch off" /> 另存为MAT格式</div>
            <div className="switch-item"><span className="switch on" /> 模拟后存储细胞结构段</div>
            <div className="switch-item"><span className="switch on" /> 模拟后存储细胞连接</div>
            <div className="switch-item"><span className="switch off" /> 在文件名中添加时间戳</div>
            <div className="switch-item"><span className="switch off" /> 将计时数据保存到文件</div>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}

